<template>
   <!-- 首页

  <div @click="xx">
    店铺详情
  </div> -->
  <div class="container">
        <!-- <i class="fa fa-compass"></i> -->
        <header ref="header_ref">
            <div class="locationImg">
                <div class="fa fa-map-marker" aria-hidden="true">
                    <!-- <div class="icon-location"></div> -->
                </div>
            </div>

            <div class="location-text">
                城市<i class="fa fa-caret-down"></i>
            </div>
        </header>
        <div class="search" ref="search">
            <div class="search-box">
                <div class="search-box-select">
                    <i class="fa fa-search" style="margin-right: 1vw"></i>搜索饿了么商家、商店名称
                </div>
            </div>
        </div>
        <div class="food_div">
            <ul class="foodType">
                <li @click="toBusiness">
                    <img />
                    <p>药店</p>
                </li>
                <li>
                    <img />
                    <p>粉店</p>
                </li>
                <li>
                    <img />
                    <p>饭店</p>
                </li>
                <li>
                    <img />
                    <p>小炒</p>
                </li>
                <li>
                    <img />
                    <p>甜食</p>
                </li>
                <li>
                    <img />
                    <p>水果</p>
                </li>
                <li>
                    <img />
                    <p>类型名</p>
                </li>
                <li>
                    <img />
                    <p>类型名</p>
                </li>
                <li>
                    <img />
                    <p>类型名</p>
                </li>
                <li>
                    <img />
                    <p>类型名</p>
                </li>
            </ul>
        </div>

        <div class="banner" id="banner">
            <div class="banner-box">
                <h3 >全能超市</h3>
                <p>搭配齐全吃得好</p>
                <a>立即抢购 &gt;</a>
            </div>
        </div>

        <div class="superUser">
            <div class="left">
                <img >
                <span>超级会员</span>
                · 每月享超值权益
            </div>
            <div class="right">
                <a>立即开通 ></a>
            </div>
        </div>

        <div class="box">
            <div class="lineleft"></div>
            <p>推荐商家</p>
            <div class="lineright"></div>
        </div>

        <div class="recommentType">
            <li>
                "综合排序"
                <i class="fa fa-caret-down"></i>
            </li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>
                筛选
                <i class="fa fa-caret-down"></i>
            </li>
        </div>

        <ul class="businessList">
            <li>
                <img  >
                <div class="businessList-li-title">
                    <div class="businessName">
                        <h3 @click="toDetail">螺蛳粉</h3>
                        <div class="mark">·</div>
                    </div>
                    <div class="businessDelivery">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">蜂鸟专送</div>
                    </div>
                    <div class="price">
                        <p>￥15起送 | 3配送</p>
                        <p>3.23km | 30分钟</p>
                    </div>
                    <div class="explain">
                        <div class="foodExplain">各种饺子</div>
                    </div>
                    <div class="userSub">
                        <div class="left">
                            <div class="mark">新</div>
                            <div class="newUserExplain">新用户首单立减九元</div>
                        </div>
                        <div class="right">
                            "2个活动"
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <div class="discounts">
                        <div class="mark">新</div>
                        <div class="newUserExplain">特价商品五元器</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</template>

<script setup lang="ts">

  import {useRouter} from "vue-router"

  const router = useRouter();

  let toDetail = ()=>{
    console.log("to detail")
    router.push("/shop/detail");
  }

  let toBusiness = ()=>{
    console.log("to business")
    router.push("/show/businessList");
  }

</script>

<style scoped>
.container {
    width: 100%;
    padding-bottom: 0.5vw;
}


.container header {
    width: 100%;
    background-color: #0097FF;
    height: 12vw;
    color: white;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    font-size: 3.4vw;
}

.container .locationImg {
    margin: 0 3vw;
}

/* search部分 */
.container .search {
    width: 100%;
    background-color: #0097FF;
    height: 12vw;
    color: gray;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}

.container .search .search-box {
    background-color: white;
    width: 80%;
    border-radius: 5px;
    /* 以下两行代码，可以实现字体居中 */
    height: 8vw;
    line-height: 8vw;
}

/* .container .search .search-box .search-box-select{
    margin: 0 auto;
    width: 70%;
} */

.container .search .search-box .search-box-select {
    margin-left: 10vw;
    width: 70%;
    font-size: 3.4vw;
}

/* =======================美食分类=============== */

.food_div {
    width: 100%;
    height: 48vw;
}

.foodType {
    width: 90%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-around;
    align-content: center;
}

.foodType li {
    width: 18vw;
    height: 20vw;
    display: flex;
    /* 设置主轴 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.foodType img {
    width: 12vw;
    height: 10vw;
}

.foodType p {
    font-size: 3.5vw;
}

/* =======================广告=============== */
.banner {
    width: 95%;
    height: 30vw;
    margin: 0 auto;
    background-image: url(../assets/index_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.banner .banner-box {
    width: 50%;
    position: absolute;
    top: 2vw;
    left: 5vw;
}

.banner .banner-box h3 {
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
}

.banner .banner-box p {
    font-size: 3.6vw;
    margin-bottom: 2.4vw;
    color: #666;
}

.banner .banner-box a {
    font-size: 3vw;
    font-weight: 700;
    color: #c79060;
}

/* =============会员============= */
.superUser {
    width: 95%;
    height: 11.5vw;
    margin: 0 auto;
    background: #feedc1;
    display: flex;
    margin-top: 2vw;
}

.superUser .left {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: left;
    font-size: 3vw;
}

.superUser .left img {
    width: 10vw;
    height: 10vw;
    margin-right: 2vw;
    margin-left: 5vw;
}

.superUser .left span {
    font-size: 4vw;
    margin-right: 2vw;
    font-weight: 700;
}

.superUser .right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.superUser .right a {
    margin-right: 4vw;
    font-size: 3vw;
    cursor: pointer;
}

/* ================推荐商家============== */
.box {
    width: 95%;
    height: 14vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .lineleft {
    width: 7vw;
    height: 0.2vw;
    background-color: #888;
    margin-right: 5vw;
}

.box .lineright {
    width: 7vw;
    height: 0.2vw;
    background-color: #888;
    margin-left: 5vw;
}

.recommentType {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.recommentType li {
    list-style: none;
    font-size: 3.5vw;
    color: #555;
}

/* =================食品信息================= */
.businessList {
    width: 100%;
    margin-top: 6vw;
    padding-bottom: 10.5vw;
}

.businessList li {
    width: 95%;
    margin: 0 auto;
    display: flex;
    border-bottom: 0.1vw solid #666;
}

.businessList li img {
    width: 18vw;
    height: 18vw;
    margin-right: 3vw;
}

.businessList-li-title {
    width: 100%;
}

.businessList-li-title .businessName {
    display: flex;
    align-items: center;
    justify-content: left;
}

.businessList-li-title .businessName h3 {
    flex: 1;
    font-size: 4vw;
    color: #333;
}

.businessList-li-title .businessName .mark {
    font-size: 4vw;
    font-weight: 700;
    width: 2vw;
    height: 4vw;
    background-color: #666;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5vw;
}

.businessList-li-title .businessDelivery {
    display: flex;
}

.businessList-li-title .businessDelivery .business-info-star-left {
    display: flex;
    justify-content: left;
    align-items: center;
    flex: 1;
}

.businessList-li-title .businessDelivery .business-info-star-right {
    color: #ffff;
    font-size: 3vw;
    background: #0097ff;
    padding: 0 2vw;
}

.businessList-li-title .businessDelivery .business-info-star-left i {
    color: #fec80e;
    font-size: 3vw;
}

.businessList-li-title .businessDelivery .business-info-star-left p {
    color: #666;
    font-size: 3vw;
    color: #666;
    margin-left: 1vw;
}

.price {
    display: flex;
    font-size: 3.6vw;
    color: #666;
}

.price p:first-of-type {
    flex: 1;
    margin-left: 1vw;
}

.price p:last-of-type {
    margin-right: 3vw;
}

.explain {
    display: flex;
    font-size: 3.2vw;
}

.explain .foodExplain {
    display: flex;
    border: 0.1vw solid #666;
}

.userSub {
    display: flex;
}

.userSub .left {
    display: flex;
    flex: 1;
    justify-content: left;
    align-items: center;
}

.userSub .left .mark {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    background-color: #70bc46;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.2vw;
    font-size: 3vw;
}

.userSub .left .newUserExplain {
    font-size: 3vw;
}

.userSub .right {
    font-size: 2.5vw;
    color: #999;
    margin-right: 2vw;
}

.discounts {
    display: flex;
}

.discounts .mark {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    background-color: #70bc46;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.2vw;
    font-size: 3vw;
}

.discounts .newUserExplain {
    font-size: 3vw;
    margin-bottom: 2vw;
}




</style>